<template>
  <div v-if="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div style="margin: 16px 0 24px; display: flex; align-items: center; justify-content: space-between">
        <div style="display: flex; align-items: center">
          <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
          <div style="margin-left: 16px; margin-right: 8px; font-size: 20px; font-weight: bold; color: rgb(0 0 0 / 90%)">{{ formValue.inName }}</div>
          <px-tag
            v-if="formValue.approvalStatus"
            effect="plain"
            :style="{
              color: `${tagColorList[formValue.approvalStatus]}`,
              border: `1px solid ${tagBorderColorList[formValue.approvalStatus]}`,
              backgroundColor: `${tagBgColorList[formValue.approvalStatus]}`
            }"
          >
            {{ formValue.approvalStatusDesc }}
          </px-tag>
        </div>
        <!-- 审核中状态+是入库人/审核人才能转审/审核 -->
        <div v-if="formValue.approvalStatus === 'approving'">
          <template v-if="props.userId == formValue.inOperateId">
            <px-button v-has="'ERC_SPAREPARTS_WAREHOUSING_TOCHECK'" type="primary" plain @click="toCheckVisible = true">转审</px-button>
          </template>
          <template v-if="props.userId == formValue.approverId">
            <px-button v-has="'ERC_SPAREPARTS_WAREHOUSING_CHECK'" type="primary" @click="checkVisible = true">审核</px-button>
          </template>
        </div>
      </div>
      <div class="view-equip-title">入库信息</div>
      <div v-if="formValue.source === 'buy'" class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库类型</div>
            <div class="text">{{ formValue?.sourceDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库单号</div>
            <div class="text">{{ formValue?.inNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库主题</div>
            <div class="text">{{ formValue?.inName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">采购单号</div>
            <div class="text">{{ formValue?.billNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">归属地块</div>
            <div class="text">{{ formValue?.facCodeDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">供应商</div>
            <div class="text">{{ formValue?.supplier || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库人员</div>
            <div class="text">{{ formValue?.inOperateName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">申请时间</div>
            <div class="text">{{ formValue?.inDate || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库审核人</div>
            <div class="text">{{ formValue?.approverName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue?.remark || "-" }}</div>
          </div>
        </div>
      </div>
      <div v-if="formValue.source === 'back'" class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库类型</div>
            <div class="text">{{ formValue?.sourceDesc || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">还回原因</div>
            <div class="text">{{ formValue?.backReason || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库单号</div>
            <div class="text">{{ formValue?.inNum || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库主题</div>
            <div class="text">{{ formValue?.inName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">关联出库单号</div>
            <div class="text">{{ formValue?.outNum || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">归属地块</div>
            <div class="text">{{ formValue?.facCodeDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">入库人员</div>
            <div class="text">{{ formValue?.inOperateName || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">申请时间</div>
            <div class="text">{{ formValue?.inDate || "-" }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库审核人</div>
            <div class="text">{{ formValue?.approverName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue?.remark || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title" style="margin-top: 32px">入库明细</div>
      <px-table :data="formValue.sparePartInventoryDTOList" class="equip-table" size="small" max-height="400" border>
        <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
  <!-- 审核弹窗 -->
  <CheckDialog
    :dialogVisible="checkVisible"
    :busId="props.sparePartsId"
    :approverId="formValue.approverId"
    :approverName="formValue.approverName"
    type="wareHousing"
    @closeDialog="
      checkVisible = false;
      getDetail();
    "
  />
  <!-- 转审弹窗 -->
  <ToCheckDialog
    :dialogVisible="toCheckVisible"
    :busId="props.sparePartsId"
    :approverId="formValue.approverId"
    :approverName="formValue.approverName"
    type="wareHousing"
    @closeDialog="
      toCheckVisible = false;
      getDetail();
    "
  />
</template>
<script setup lang="ts">
import { getSparePartsWarehousing } from "@/api/erc/spareParts";
import { computed, reactive, toRefs, watch } from "vue";
import CheckDialog from "../../components/CheckDialog.vue";
import ToCheckDialog from "../../components/ToCheckDialog.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "sparePartsId", "userId"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {},
  tableColumns: [
    { prop: "facCodeDesc", label: "归属地块", minWidth: "100", showOverflowTooltip: true, fixed: "left" },
    { prop: "sparePartName", label: "备件名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "eqpTypeCodeDesc", label: "备件类型", minWidth: "180", showOverflowTooltip: true },
    { prop: "brandVal", label: "品牌", minWidth: "100", showOverflowTooltip: true },
    { prop: "specification", label: "规格型号", minWidth: "150", showOverflowTooltip: true },
    { prop: "sparePartUnit", label: "单位", minWidth: "80", showOverflowTooltip: true },
    { prop: "positionCode", label: "存放位置", minWidth: "120", showOverflowTooltip: true },
    { prop: "currentStock", label: "当前库存", minWidth: "80", showOverflowTooltip: true },
    { prop: "quantity", label: "本次入库量", minWidth: "120", showOverflowTooltip: true, fixed: "right" }
  ],
  toCheckVisible: false,
  checkVisible: false
});
const { formValue, tableColumns, toCheckVisible, checkVisible } = toRefs(state);

const tagColorList = {
  pass: "#10B981",
  approving: "#F59E0B",
  reject: "#EF4444",
  not_pass: "#9254DE"
};

const tagBorderColorList = {
  pass: "#B7EAD9",
  approving: "#FCE2B6",
  reject: "#FAC7C7",
  not_pass: "#DDC2FF"
};

const tagBgColorList = {
  pass: "#E8F8F3",
  approving: "#FEF5E6",
  reject: "#FEECEC",
  not_pass: "#F2E7FF"
};

// 监视isMain和isView值
watch(isMain, val => {
  if (!val && props.isView) {
    getDetail();
  } else {
    formValue.value = {};
  }
});
// 获取详情
const getDetail = async () => {
  const params = {
    id: props.sparePartsId
  };
  const data = await getSparePartsWarehousing(params);
  formValue.value = data;
  if (formValue.value.source === "buy") {
    tableColumns.value = [
      { prop: "facCodeDesc", label: "归属地块", minWidth: "100", showOverflowTooltip: true, fixed: "left" },
      { prop: "sparePartName", label: "备件名称", minWidth: "180", showOverflowTooltip: true },
      { prop: "eqpTypeCodeDesc", label: "备件类型", minWidth: "180", showOverflowTooltip: true },
      { prop: "brandVal", label: "品牌", minWidth: "100", showOverflowTooltip: true },
      { prop: "specification", label: "规格型号", minWidth: "150", showOverflowTooltip: true },
      { prop: "sparePartUnit", label: "单位", minWidth: "80", showOverflowTooltip: true },
      { prop: "positionCode", label: "存放位置", minWidth: "120", showOverflowTooltip: true },
      { prop: "currentStock", label: "当前库存", minWidth: "80", showOverflowTooltip: true },
      { prop: "quantity", label: "本次入库量", minWidth: "120", showOverflowTooltip: true, fixed: "right" }
    ];
  } else if (formValue.value.source === "back") {
    tableColumns.value = [
      { prop: "facCodeDesc", label: "归属地块", minWidth: "100", showOverflowTooltip: true, fixed: "left" },
      { prop: "sparePartName", label: "备件名称", minWidth: "180", showOverflowTooltip: true },
      { prop: "eqpTypeCodeDesc", label: "备件类型", minWidth: "180", showOverflowTooltip: true },
      { prop: "brandVal", label: "品牌", minWidth: "100", showOverflowTooltip: true },
      { prop: "specification", label: "规格型号", minWidth: "150", showOverflowTooltip: true },
      { prop: "sparePartUnit", label: "单位", minWidth: "80", showOverflowTooltip: true },
      { prop: "positionCode", label: "存放位置", minWidth: "120", showOverflowTooltip: true },
      { prop: "quantity", label: "出库数量", minWidth: "120", showOverflowTooltip: true },
      { prop: "returnQuantity", label: "还回数量", minWidth: "120", showOverflowTooltip: true, fixed: "right" }
    ];
  }
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");
</style>
